import './index.css';
let data = [
    {
        src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c758eb7e0dce4307c62c47155519bc80.png?thumb=1&w=180&h=124&f=webp&q=90',
    },
    {
        src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/db20078b0c1a5f07dcf85000b17b7322.png?thumb=1&w=180&h=124&f=webp&q=90',
    },
    {
        src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d3fec390debf1164c8df721e821cc28a.png?thumb=1&w=180&h=124&f=webp&q=90',
    },
    {
        src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/07c66ae36f99daa4d5f613bb3d04ded6.png?thumb=1&w=180&h=124&f=webp&q=90',
    },
    {
        src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ba211a988be47d7ae5a1a448ecf0b67.jpeg?thumb=1&w=180&h=124&f=webp&q=90',
    },
    {
        src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52c8cab6760eadd9e01871dfbf27817f.png?thumb=1&w=180&h=124&f=webp&q=90',
    },
    {
        src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/09f5d6379d431d34c7986bf81116ee3a.png?thumb=1&w=180&h=124&f=webp&q=90',
    },
];

// 初始化
let btnLeft = document.querySelector('.left');
let btnRight = document.querySelector('.right');
let main = document.querySelector('main');
// 根据数据长度去创建div，并赋予相应的自定义id
for (let i = 0; i < data.length; i++) {
    main.innerHTML += `<div id=${i}>
  <img src="${data[i].src}" alt="" />
</div>`;
}
let divs = document.querySelectorAll('div');
// 初始化3张能见的图片
divs[0].className = 'slideShowLeft';
divs[1].className = 'slideShowMain';
divs[2].className = 'slideShowRight';
let temp = 0;
// 向左走事件
function left() {
    // 获取左中右三个元素
    let slideShowLeft = document.querySelector('.slideShowLeft');
    let slideShowMain = document.querySelector('.slideShowMain');
    let slideShowRight = document.querySelector('.slideShowRight');
    // 获取最右图片的下一张
    if (slideShowRight.id == 6) {
        temp = 0;
    } else {
        temp = +slideShowRight.id + 1;
    }
    let slideTemp = document.getElementById(temp);

    // 将主视角的三张图片替换
    slideShowLeft.classList.remove('slideShowLeft');
    slideShowMain.className = 'slideShowLeft';
    slideShowRight.className = 'slideShowMain';
    slideTemp.className = 'slideShowRight';
}
// 点击触发左滑动
btnLeft.addEventListener('click', function () {
    left();
});
// 向右走事件
function right() {
    let slideShowLeft = document.querySelector('.slideShowLeft');
    let slideShowMain = document.querySelector('.slideShowMain');
    let slideShowRight = document.querySelector('.slideShowRight');
    // 获取最左图片的上一张
    if (slideShowLeft.id == 0) {
        temp = 6;
    } else {
        temp = +slideShowLeft.id - 1;
    }
    let slideTemp = document.getElementById(`${temp}`);
    // 将主视角的三张图片替换
    slideShowRight.classList.remove('slideShowRight');
    slideShowMain.className = 'slideShowRight';
    slideShowLeft.className = 'slideShowMain';
    slideTemp.className = 'slideShowLeft';
}
// 点击触发右滑动
btnRight.addEventListener('click', function () {
    // 获取左中右三个元素
    right();
});
// 初始定时器
let time;
time = setInterval(function () {
    left();
}, 2000);
// 鼠标移入事件
main.addEventListener('mouseover', function (e) {
    // 如果进入的目标是img才进行停止定时器
    if (e.target.tagName === 'IMG') {
        clearInterval(time);
    }
});
// 鼠标移出事件
main.addEventListener('mouseout', function () {
    // 先清除原来的定时器
    clearInterval(time);
    time = setInterval(function () {
        left();
    }, 2000);
});
